<template>
  <div>
    <!-- 自定义table头部搜索  -->
    <div
      class="table_filter_cont"
      @mouseover="tableFilterMouseover"
      @mouseleave="tableFilterMouseout"
      :style="{
        left: options.left + 'px',
        top: options.top + 'px',
        width: options.width + 'px',
      }"
    >
      <!--  icon   -->
      <div
        class="table_filter_arrow"
        :style="{ left: options.iconLeft - options.left + 'px' }"
      >
        <span></span>
      </div>
      <!--  Input   -->
      <div
        class="table_filter_mian"
        v-if="options.type.split('-')[0] == 'input'"
      >
        <Input
          style="width: 100%"
          v-model="options[options.type.split('-')[1]]"
          :maxlength="options.type.split('-')[2]"
          prefix="ios-search"
          :placeholder="options.placeholder"
        />
      </div>
      <!--  DatePicker  -->
      <div
        class="table_filter_mian"
        v-if="options.type.split('-')[0] == 'datePicker'"
      >
        <DatePicker
          :clearable="false"
          style="width: 100%"
          v-model="options[options.type.split('-')[1]]"
          :type="options.type.split('-')[2]"
          :placeholder="options.placeholder"
          @on-open-change="openDatePickerFun"
        />
      </div>
      <!--  Checkbox  -->
      <div
        class="table_filter_checkbox"
        v-if="options.type.split('-')[0] == 'Checkbox'"
      >
        <CheckboxGroup
          class="checkboxGroupClass"
          v-model="options[options.type.split('-')[1]]"
        >
          <Checkbox
            v-for="(item, index) in options[options.type.split('-')[2]]"
            :key="index"
            :label="item.val"
            ><span class="checkboxSpan">{{ item.name }}</span></Checkbox
          >
        </CheckboxGroup>
      </div>
      <!--  Select  -->
      <div
        class="table_filter_mian"
        v-if="options.type.split('-')[0] == 'Select'"
      >
        <Select
          v-model="options[options.type.split('-')[1]]"
          filterable
          :multiple="options.type.split('-')[3] === 'multiple' ? true : false"
          :clearable="false"
          style="width: 100%"
          :placeholder="options.placeholder"
          @on-select="openSelectFun"
          @on-query-change="(e)=>{
              return openChangeFun(e,options.type.split('-')[1])
            }"
        >
          <Option
            v-for="(item, index) in options[options.type.split('-')[2]]"
            :key="item.val"
            :value="item.val"
            >{{ item.name }}</Option
          >
        </Select>
      </div>
      <!-- 操作 -->
      <div
        class="tableTitleClass"
        v-if="options.type.split('-')[0] == 'tableTitle'"
      >
        <CheckboxGroup v-model="options[options.type.split('-')[1]]">
          <Checkbox
            v-for="(item, index) in options[options.type.split('-')[2]]"
            :key="index"
            :label="item.val"
            ><span class="checkboxSpan">{{ item.name }}</span></Checkbox
          >
        </CheckboxGroup>
      </div>
      <!-- AutoComplete 搜索不能共用   查询当前人下用户列表 -->
      <div
        class="tableTitleClass"
        v-if="options.type.split('-')[0] == 'AutoComplete'"
      >
        <AutoComplete
          v-model="selectSearchVal"
          @on-search="selectSearchListFun"
          @on-select="selectSelectListFun"
          icon="ios-arrow-down"
          :placeholder="options.placeholder"
          style="width: 100%"
        >
          <Option
            v-for="(item, index) in selectSearchList"
            :value="item.userName"
            :key="index"
            >{{ item.userName }}</Option
          >
        </AutoComplete>
      </div>
      <!--  Select 获取所有城市列表  -->
      <div
        class="table_filter_mian"
        v-if="options.type.split('-')[0] == 'SelectCity'"
      >
        <Select
          v-model="options[options.type.split('-')[1]]"
          filterable
          :multiple="options.type.split('-')[3] === 'multiple' ? true : false"
          :clearable="false"
          style="width: 100%"
          :placeholder="options.placeholder"
          @on-select="openSelectFun"
        >
          <Option
            v-for="(item, index) in options[options.type.split('-')[2]]"
            :key="index"
            :value="item.cityCode"
            >{{ item.cityName }}</Option
          >
        </Select>
      </div>
      <!--  三级联动   -->
      <div
        class="table_filter_mian"
        v-if="options.type.split('-')[0] == 'cascader'"
      >
        <!-- <Input style=" width: 100%;" v-model="options[options.type.split('-')[1]]" prefix="ios-search" :placeholder="options.placeholder" /> -->
        <Cascader
          :data="options[options.type.split('-')[2]]"
          v-model="options[options.type.split('-')[1]]"
        ></Cascader>
      </div>
      <!-- 来源渠道 -->
      <div
        class="table_filter_mian"
        v-if="options.type.split('-')[0] == 'SelectChannel'"
      >
        <Select
          v-model="options[options.type.split('-')[1]]"
          filterable
          :multiple="options.type.split('-')[3] === 'multiple' ? true : false"
          :clearable="false"
          style="width: 100%"
          :placeholder="options.placeholder"
          @on-select="openSelectFun"
        >
          <template
            v-for="item in channelList"
          >
            <Option
              :value="item.channelId"
              :key="item.channelId"
              >{{
                item.channelName +
                "-" +
                item.provinceName +
                "-" +
                item.cityName
              }}</Option
            >
            <!-- :disabled="items.validate == 2"  -->
          </template>
        </Select>
      </div>
      <!-- 互动方式 -->
      <div
        class="table_filter_mian"
        v-if="options.type.split('-')[0] == 'SelectInteractive'"
      >
        <Select
          v-model="options[options.type.split('-')[1]]"
          filterable
          :multiple="options.type.split('-')[3] === 'multiple' ? true : false"
          :clearable="false"
          style="width: 100%"
          :placeholder="options.placeholder"
          @on-select="openSelectFun"
        >
          <Option
            v-for="(item, index) in interactiveWayList"
            :value="item.channelId + ''"
            :key="index"
            >{{ item.channelName + " - " + item.channelNameS }}</Option
          >
        </Select>
      </div>
      <!-- 底部 -->
      <div class="table_filter_foot">
        <Button type="primary" @click="okFilter">确定</Button>
        <Button type="default" @click="cancelFilter">取消</Button>
      </div>
    </div>
    <!-- 自定义table头部菜单配置  -->
    <Modal
      v-model="options.type === 'tableTrue' ? true : false"
      title="编辑显示字段"
      @on-cancel="editDisplayFieldCancel"
      width="566"
      :footer-hide="true"
      :mask-closable="false"
      class="subscribeModalStyle"
    >
      <div class="subscribeModalStateModal">
        <p style="margin-bottom: 16px">
          案场：{{ options.nameCrimeSceneName }}
        </p>
        <Transfer
          :titles="['案场台账全字段', '显示选项']"
          :list-style="listStyle"
          :data="options.tableTitleList"
          :target-keys="options.operatingVal"
          @on-change="handleChange1"
        ></Transfer>
        <div class="footer">
          <Button @click="editDisplayFieldCancel">取消</Button>
          <Button type="info" @click="editDisplayFieldOk">保存</Button>
        </div>
      </div>
    </Modal>
  </div>
</template>
<script>
import { getByAdviser } from "@/api/materialManagement.js";
import {
  aggChannelQueryGroup,
  businessUserRealEstate,
  updateZtCustomerHead,
} from "@/api/customerManagement.js";
export default {
  props: {
    options: {
      type: Object,
      defult: () => {},
    },
    channelType: {
      type: Boolean,
      defult: false,
    },
    channelList: {
      type: Array,
      defult: () => [],
    },
  },
  data() {
    return {
      listStyle: {
        width: "220px",
        height: "400px",
      },
      clientWidth: document.documentElement.clientWidth, // 获取屏幕宽度
      openDatePicker: true, // 选择下拉后 延迟几秒
      selectSearchList: [],
      selectSearchVal: "",
      sourceChannelList: [],
      interactiveWayList: [],
      channelListMess: [],
    };
  },
  methods: {
    //自定义table头部菜单配置 关闭
    editDisplayFieldCancel() {
      this.options.type = "";
    },
    //自定义table头部菜单配置 确定
    editDisplayFieldOk() {
      updateZtCustomerHead({
        buildingId: this.options.nameCrimeSceneVal,
        dbKeys: this.options.operatingVal,
      })
        .then((res) => {
          this.$Message.success("编辑显示成功!");
          this.options.type = "";
          this.$emit("okFilterFun", "");
        })
        .catch((err) => {
          console.log("编辑表头报错", err);
        });
    },
    // 选择Transfer事件
    handleChange1(newTargetKeys, direction, moveKeys) {
      this.options.operatingVal = newTargetKeys;
      console.log(newTargetKeys,'newTargetKeys');
    },
    // 确定
    okFilter() {
      console.log(this.options[this.options.type.split('-')[1]],'1111111111111111111111');
      if(this.options.type.split('-')[1]=="phoneNumber"&&this.options[this.options.type.split('-')[1]].length<4){
        this.$Message.warning('手机号码至少输入4位。')
        return false
      }
      this.options.left = -1000;
      this.options.top = -1000;
      // console.log(this.options, "11111111111111111111111");
      this.$emit("okFilterFun", this.options);
    },
    // 取消
    cancelFilter() {
      if (
        this.options.type.split("-")[0] == "Checkbox" ||
        this.options.type.split("-")[3] == "multiple"
      ) {
        this.options[this.options.type.split("-")[1]] = [];
      } else if (this.options.type.split("-")[0] == "AutoComplete") {
        this.selectSearchList = [];
        this.selectSearchVal = "";
        this.options[this.options.type.split("-")[1]] = "";
        this.options[this.options.type.split("-")[2]] = "";
      } else {
        this.options[this.options.type.split("-")[1]] = "";
      }
      this.options.left = -1000;
      this.options.top = -1000;
      this.$emit("cancelFilterFun", this.options);
    },
    // 鼠标移入弹框 关闭定时器
    tableFilterMouseover() {
      clearTimeout(this.options.setTimeout);
    },
    // 鼠标移除弹框
    tableFilterMouseout() {
      if (!this.openDatePicker) {
        this.options.setTimeout = setTimeout(() => {
          this.options.left = -1000;
          this.options.top = -1000;
          this.openDatePicker = true;
        }, 800);
      } else {
        this.options.left = -1000;
        this.options.top = -1000;
      }
    },
    // 时间组件
    openDatePickerFun(val) {
      console.log(val,'val');
      this.openDatePicker = val;
    },
    // select
    openSelectFun(val) {
      console.log(val,'selece选择');
      this.openDatePicker = false;
    },
    openChangeFun(e,val){
      console.log(e,val,'我是change');
      if(e&&val=="attributionConsultantVal"){
        this.$emit("openChangeFun", e);
      }

    },
    // 自定义 服务人员
    selectSearchListFun(value) {
      if (!value) {
        this.selectSearchList = [];
      } else {
        this.$nextTick(() => {
          getByAdviser({ searchKey: value })
            .then((res) => {
              if (res) {
                this.selectSearchList = res.list;
              }
            })
            .catch((err) => {
              console.log("搜索用户列表报错", err);
            });
        });
      }
    },
    selectSelectListFun(value) {
      this.selectSearchList.map((item) => {
        if (item.userName === value) {
          this.options[this.options.type.split("-")[1]] = item.userId;
          this.options[this.options.type.split("-")[2]] = item.userName;
        }
      });
    },
    // 获取渠道配置列表
    sourceChannelListFun() {
      businessUserRealEstate({})
        .then((reD) => {
          if (reD && reD.buildingInfos && reD.buildingInfos.length > 0) {
            this.aggChannelQueryGroupList(reD.buildingInfos[0].cityCode);
          } else {
            this.aggChannelQueryGroupList("");
          }
        })
        .catch((err) => {
          console.log("查询中台用户信息", err);
        });
    },
    aggChannelQueryGroupList(cityCode) {
      aggChannelQueryGroup({ cityCode: cityCode })
        .then((res) => {
          if (res && res.list && res.list.length > 0) {
            this.sourceChannelList = res.list;
            for (let i = 0; i < res.list.length; i++) {
              for (let g = 0; g < res.list[i].list.length; g++) {
                if (res.list[i].list[g].passageway.length > 0) {
                  for (
                    let h = 0;
                    h < res.list[i].list[g].passageway.length;
                    h++
                  ) {
                    res.list[i].list[g].passageway[h].channelNameS =
                      res.list[i].list[g].channelName;
                  }
                }
                this.interactiveWayList = [
                  ...this.interactiveWayList,
                  ...res.list[i].list[g].passageway,
                ];
              }
            }
          } else {
            this.sourceChannelList = [];
            this.interactiveWayList = [];
          }
        })
        .catch((err) => {
          console.log("渠道配置列表报错", err);
        });
    },
  },
  mounted() {
     console.log('过滤的options',this.options)
    //  console.log(Array.isArray(this.options.sourceChannelList))
    //渠道配置
    this.channelType && this.sourceChannelListFun();
  },
  watch: {
    channelList: {
      deep: true,
      handler(newValue) {
        this.channelListMess = newValue;
      },
    },
  },
};
</script>
<style lang="scss" scoped>
.subscribeModalStyle {
  .footer {
    margin-top: 20px;
    text-align: center;
    button {
      width: 80px;
      margin: 0 10px;
    }
  }
  /deep/ .ivu-modal-body {
    padding: 0;
  }
}
.subscribeModalStateModal {
  padding: 20px 30px;
}
.table_filter_cont {
  z-index: 99;
  background-color: #fff;
  box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.1);
  position: fixed;
}
.table_filter_mian {
  padding: 14px;
}
.table_filter_checkbox {
  padding: 14px 14px 11px 14px;
}
.table_filter_foot {
  border-top: 1px solid #dcdee2;
  text-align: center;
  padding: 14px 0;
  button {
    margin: 0 10px;
  }
}
.table_filter_arrow {
  position: absolute;
  top: -6px;
  margin-left: 2px;
  span:after {
    display: block;
    content: " ";
    width: 0;
    height: 0;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
    border-bottom: 6px solid #fff;
  }
}
.checkboxGroupClass {
  label {
    width: 100%;
    margin-bottom: 6px;
    overflow: hidden;
    &:last-child {
      margin-bottom: 0px;
    }
    .ivu-checkbox {
      float: right;
    }
    .checkboxSpan {
      float: left;
    }
  }
}
.tableTitleClass {
  padding: 14px 14px 8px 14px;
  label {
    margin-bottom: 6px;
  }
  .checkboxSpan {
    margin-left: 5px;
  }
}

.rightFooter{
  .ivu-transfer-list:first-child{
    .ivu-transfer-list-footer{
      .footer-btn{
          height: 23px;
          Button{
              display: none;
          }
      }
    }
  }
}
</style>

